<template>
  <div class="bjads">
    <div class="adniafs">
      <div class="fsiuf">
        <div class="tio">
          <div class="nrads">
            <p class="zw">北京市投资促进服务中心</p>
            <p class="yw">Beijing Investment Promotion Service Center</p>
          </div>
        </div>
        <p class="hydl"></p>
        <div class="dlbd">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item prop="name">
              <el-input
                style="background-color: transparent !important"
                v-model="ruleForm.name"
                placeholder="请输入用户名"
              >
                <i slot="prefix" class="el-input__icon el-icon-yonghuming"></i
              ></el-input>
            </el-form-item>
            <el-form-item prop="prowws">
              <el-input
                v-model="ruleForm.prowws"
                show-password
                placeholder="请输入密码"
              >
                <i slot="prefix" class="el-input__icon el-icon-mima"></i
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div class="outefa">
                <el-button style="cursor: pointer" @click="yzaj" class="yzan"
                  >点击完成验证</el-button
                >
              </div>

              <el-card class="cover" v-show="fasdbo">
                <slide-verify
                  :l="42"
                  :r="10"
                  :w="310"
                  :h="155"
                  slider-text="向右滑动"
                  @success="onSuccess"
                  @fail="onFail"
                  @refresh="onRefresh"
                  @fulfilled="dadsfadf"
                  :imgs="slideImgs"
                >
                </slide-verify>
              </el-card>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                class="dlan"
                style="cursor: pointer"
                @click="submitForm('ruleForm')"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getToken, removeToken } from "@/utils/auth";
import Cookies from "js-cookie";

export default {
  data() {
    return {
      slideImgs: [
        require("../../yzm/a1.png"),
        require("../../yzm/a2.png"),
        require("../../yzm/a3.png"),
        require("../../yzm/a4.png"),
        require("../../yzm/a5.png"),
      ],
      ruleForm: {
        name: "",
        prowws: "",
      },
      yzm: "",
      fasdbo: false,
      login吾心欢喜,
      玉人在侧: {},
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 0,
            max: 30,
            message: "长度在 0 到 30 个字符",
            trigger: "blur",
          },
        ],
        prowws: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 0,
            max: 30,
            message: "长度在 0 到 30 个字符",
            trigger: "blur",
          },
        ],
        yzm: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            min: 0,
            max: 30,
            message: "长度在 0 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    yzaj() {
      this.fasdbo = true;
    },

    onSuccess() {
      //滑块验证通过之后触发的
      this.$notify.success("验证成功");
      this.fasdbo = false;
      this.yzm = "验证成功";
      // this.$router.push('/')
    },
    onFail() {
      this.$notify.success("验证失败");
      this.yzm = "验证失败";
      // this.$router.push('/')
    },
    onRefresh() {},
    dadsfadf() {},
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.yzm === "验证成功") {
            this.getData();
          } else {
            this.$message.error("请验证");
          }
        } else {
          return false;
        }
      });
    },
    async getData() {
      //(this.ruleForm.name);
      const { data: res1 } = await this.$http.post("system/ssologin/Login", {
        username: this.ruleForm.name,
        password: this.ruleForm.prowws,
        type_project: "T005", //T001目标企业管理系统   T002招商渠道管理系统   T003投资北京一站式服务系统   T004招商推介活动管理系统-重大活动管理   T005招商推介活动管理系统   T006招商项目管理系统
      });
      if (res1.code === "200") {
        console.log(res1);
        Cookies.set("token", res1.token);
        localStorage.setItem("insuranceCode", JSON.stringify(res1.roleid));

        const { data: yhdx } = await this.$http.post(
          "system/ssologin/getTokenUser",
          {
            token: res1.token,
          }
        );
        Cookies.set("getUserName", yhdx.data.userName);
        this.$router.push("/page/page1");
      } else {
        this.$message.error(res1.msg);
      }
    },
  },
  components: {},
  computed: {},
};
</script>
<style lang="less" scoped>
.cover {
  width: fit-content;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.bjads {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0069ff;
  .adniafs {
    position: relative;
    // top: -7%;
    // position: absolute;
    // top: 50%;
    // transform: translate(-3%, -41%);
    // background: rgba(255, 255, 255, 0.47);
    // box-shadow: 0px 0px 18px 0px rgba(55, 90, 211, 0.33);
    // backdrop-filter: blur(10px);

    .fsiuf {
      width: 90%;

      .tio {
        display: flex;
        justify-content: center;

        img {
          width: 105px;
          height: 61px;
        }

        .nrads {
          margin-left: 17px;
        }

        .zw {
          font-size: 32px;
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 500;
          color: #ffffff;
          line-height: 48px;
          letter-spacing: 2px;
        }

        .yw {
          font-size: 16px;
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          color: #b2cffe;
          line-height: 24px;
          margin-top: 13px;
        }
      }

      .hydl {
        margin-top: 78px;
        margin-bottom: 80px;
        background-size: 100% 100%;
        width: 1249px;
        height: 83px;
      }

      /deep/.el-input__inner {
        background-color: transparent !important;
        border-top: 1px solid rgba(255, 255, 255, 0) !important;
        border-left: 1px solid rgba(255, 255, 255, 0) !important;
        border-right: 1px solid rgba(255, 255, 255, 0) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.34) !important;
        font-size: 20px;
        position: relative;
        left: 24px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 400;
        color: #ffffff !important;
      }

      /deep/ input:-internal-autofill-previewed,
      input:-internal-autofill-selected {
        -webkit-text-fill-color: #808080;
        transition: background-color 1000s ease-out 0.5s;
      }

      /deep/input {
        border: none !important;
        height: 28px !important;
        line-height: 28px !important;
        color: rgba(255, 255, 255, 0.8);
        -webkit-text-fill-color: #ededed !important;
        background-color: transparent !important;
        transition: background-color 50000s ease-in-out 0s;
        caret-color: rgba(255, 255, 255, 0.5);
      }

      .dlbd {
        width: 624px;
        margin: auto;

        /deep/.el-form-item__content {
          margin-left: 0 !important;
        }

        /deep/.el-input__icon {
          width: 36px;
          height: 36px;
          // border-right: 1px solid rgba(255, 255, 255, 0.34);
          // margin-right: 13px
        }

        /deep/.el-form-item {
          margin-bottom: 50px;
          text-align: center;
        }

        .yzan {
          background: rgba(255, 255, 255, 0.42);
          border-radius: 30px;
          border: 1px solid #dfdfdf;
          width: 100%;
          font-size: 20px;
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          color: #0069ff;
          position: relative;
          left: 16px;
        }

        .dlan {
          background: #227bf1;
          border-radius: 30px;
          border: 1px solid #dfdfdf;
          width: 100%;
          font-size: 20px;
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 500;
          color: #ffffff;
          line-height: 30px;
          letter-spacing: 1px;
          position: relative;
          left: 16px;
        }
      }

      // .dlbd {
      //    /deep/.el-form-item__content {
      //       margin-left: 0 !important;
      //    }

      //    /deep/.el-input__wrapper {
      //       background-color: transparent !important;
      //    }

      //    /deep/.el-input__inner {
      //       height: 60px;
      //       background: #FFFFFF;
      //       border-radius: 13px;
      //       border: 1px solid #DFDFDF;
      //    }

      //    /deep/.el-button--primary {
      //       width: 80%;
      //       margin: auto;
      //       height: 60px;
      //       font-size: 20px;
      //       background: #227BF1;
      //       border-radius: 30px;
      //       border: 1px solid #DFDFDF;
      //    }

      //    /deep/.el-input__icon {
      //       height: 100%;
      //       width: 36px;
      //       text-align: center;
      //       transition: all .3s;
      //       line-height: 40px;
      //       color: RGBA(34, 123, 241, 1);
      //    }

      //    /deep/.el-input--prefix .el-input__inner {
      //       padding-left: 40px;
      //    }

      //    /deep/.el-input--prefix .el-input__inner::before {
      //       content: '';

      //    }
      // }
    }
  }
}

.outefa {
  display: flex;
  justify-content: space-between;
}
</style>
